<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../src/josh-ui.css">
    <title>JoshUi-搜索框</title>
</head>
<body>
    <div class="ju-content">
        <!-- 带suggest的搜索框 -->
        <div class="ju-search">
        <!-- 搜索中的状态 -->
        <!-- <div class="ju-search on-focus"></div> -->
            <!-- 搜索框 使用form结构以实现键盘提交搜索操作-->
            <form class="ju-search-form" action="#">
                <div class="ju-search-input-wrap">
                    <i class="fa fa-search ju-search-icon"></i>
                    <input class="ju-search-input" type="text" placeholder="搜索" autocomplete="off" 
                    required></input>
                    <i class="fa fa-close ju-search-clear"></i>
                </div>
                <span class="ju-search-cancel">取消</span>
            </form>
            <!-- 搜索建议 -->
            <ul class="ju-search-suggest">
                <li class="ju-suggest-item">手机</li>
                <li class="ju-suggest-item">iPhone XS Max</li>
                <li class="ju-suggest-item">华为P30</li>
                <li class="ju-suggest-item">小米 MIX3</li>
                <li class="ju-suggest-item">诺基亚1110</li>
            </ul>
        </div>
        <p class="content">内容区</p>
    </div>
    <script>
        window.onload = function(){
            let juSearch = document.querySelector('.ju-search');
            // 输入框被选中，进入搜索模式
            document.querySelector('.ju-search-input').addEventListener('focus',function(){
                juSearch.classList.add('on-focus');
            })
            // 点击取消，返回正常模式
            document.querySelector('.ju-search-cancel').addEventListener('click',function(){
                juSearch.classList.remove('on-focus');
            })
        }
    </script>
</body>
</html>